<template>
    <BaseEcharts :chatsOption="chatsOption"></BaseEcharts>
</template>

<script>
    import BaseEcharts from "../../../components/common/Cahrts/coreEcharts"

    export default {
        components: {
            BaseEcharts
        },
        data() {
            return {
                chatsOption: {
                    tooltip: {
                        trigger: 'axis',
                        formatter: '{b0}{a0}: {c0}<br />{b1}{a1}: {c1}<br />{b2}{a2}: {c2}<br />{b3}{a3}: {c3}<br />',
                        axisPointer: {
                            type: 'line',
                            label: {
                                backgroundColor: '#283b56'
                            }
                        },
                        textStyle: {
                            fontSize: 60,
                        },
                        padding: 20,
                        borderWidth: 4,
                        borderColor: "#48AFFF",
                        backgroundColor: "#010541",
                        extraCssText: "border-radius:20px;",

                    },
                    color: ['#8275FA', '#FB579B', '#FE7272', '#FBA76A'],
                    legend: {
                        itemWidth: 60,
                        itemHeight: 30,
                        textStyle: {
                            color: "#fff",
                            fontSize: 40,
                        }
                    },
                    grid: {
                        left: "12%",
                        top: "12%",
                        right: "10%"
                    },

                    xAxis: [
                        {
                            type: 'category',
                            axisTick: {show: false},
                            axisLine: {
                                lineStyle: {
                                    color: "#fff",
                                }
                            },
                            axisLabel: {
                                fontSize: 40,
                                color: "#fff",
                            },
                            data: ['2012', '2013', '2014', '2015', '2016']
                        }
                    ],
                    yAxis: [

                        {
                            type: 'value',
                            splitLine: {
                                show: false,
                            },
                            axisLine: {
                                lineStyle: {
                                    color: "#fff",
                                }
                            },
                            axisLabel: {
                                fontSize: 40,
                                color: "#fff",
                            }
                        }
                    ],
                    series: [
                        {
                            name: '牛肉',
                            type: 'bar',
                            stack: "stack",
                            barMaxWidth: "40%",
                            data: [320, 332, 301, 334, 390]
                        },
                        {
                            name: '羊肉',
                            type: 'bar',
                            stack: "stack",
                            barMaxWidth: "40%",

                            data: [220, 182, 191, 234, 290]
                        },
                        {
                            name: '猪肉',
                            type: 'bar',
                            stack: "stack",
                            barMaxWidth: "40%",
                            data: [150, 232, 201, 154, 190]
                        },
                        {
                            name: '兔肉',
                            type: 'bar',
                            stack: "stack",
                            barMaxWidth: "40%",
                            data: [150, 232, 201, 154, 190]
                        },

                    ]
                }
            }

        }

    }
</script>
